<template>
  <div class="ind">
    <x-nav></x-nav>
    <div class='input'>
      <el-input placeholder="请输入内容" v-model="keyWord" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click='getList'></el-button>
      </el-input>
    </div>

    <div class="left_side">
      <el-tag @click="query(1)" style="cursor: pointer"> 猫咪</el-tag>
      <el-tag @click="query(2)" type="success" style="margin-top: 10px;cursor: pointer">犬类</el-tag>
      <el-tag @click="query(3)" type="success" style="margin-top: 10px;cursor: pointer">兔子</el-tag>
      <el-tag @click="query(4)" type="success" style="margin-top: 10px;cursor: pointer">乌龟</el-tag>
    </div>
    <div class="main">
      <div class="pet" v-for="(p,i) in petList" :key="i">
        <el-image style="width: 100%; height: 70%" :src="p.imgUrl" fit="fit"></el-image>
        <span class="desc">名称：{{p.title}}</span>
        <span class="desc">售价：<span style="color: red;font-weight: bold;">{{p.price}}</span></span>
        <span class="add" @click="addCart(p)">加入购物车</span>
      </div>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-pagination layout="prev, pager, next" :total="total" :page-size=10 @current-change="currentChange"
        :current-page="currentPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import Cookie from "js-cookie"
import XNav from "../components/x-nav";

export default {
  name: "index",
  components: { XNav },
  data () {
    return {
      queryType: 0,
      total: 100,
      limit: 20,
      currentPage: 1,
      keyWord: '',
      petList: [{
        id: "1",
        imgUrl: "https://img-blog.csdnimg.cn/20200610155515453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjYxNTg3,size_16,color_FFFFFF,t_70",
        title: "小猫",
        price: "123123"
      }]
    }
  },
  methods: {
    addCart (p) {
      console.log(p)
      console.log(p.id)
      if (Cookie.get("token") === null || Cookie.get("token") === undefined) {
        console.log(123123123123)
        alert("未登录，正在跳转")
        this.$router.push("/login")
      } else {
        this.$http.post('cart/add', {
          goodId: p.id,
          userId: JSON.parse(Cookie.get("token")).id
        }).then(data => {
          if (data.data.code === 100000) {
            this.$message.success("添加成功")
          } else {
            this.$message.error(data.data.msg)
          }
        })
      }
    },
    getList () {
      console.log(this.keyWord)
      this.$http.get("goods/list", {
        params: {
          page: this.currentPage,
          limit: this.limit,
          queryType: this.queryType,
          str: this.keyWord
        }
      }).then(data => {
        if (data.data.code === 100000) {
          this.petList = data.data.data.list;
          this.total = data.data.data.total
        }
      })
    },
    initData () {
      this.$http.get("goods/list", {
        params: {
          page: this.currentPage,
          limit: this.limit,
          queryType: this.queryType
        }
      }).then(data => {
        if (data.data.code === 100000) {
          this.petList = data.data.data.list;
          this.total = data.data.data.total
        }
      })
    },
    currentChange () {
      this.getList()
    },
    query (type) {
      this.queryType = type;
      this.initData()
    }
  },
  created () {
    this.initData()
  }
}
</script>

<style scoped>
.ind {
  height: 100%;
  width: 100%;
}

.main {
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}
.input {
  display: flex;
  justify-content: center;
}
.input-with-select {
  width: 25%;
  padding: 5px 10px;
}
.pet {
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 300px;
  width: 280px;
  margin-left: 20px;
  margin-top: 10px;
  position: relative;
}

.desc {
  display: block;
  margin-top: 10px;
  margin-left: 10%;
}

.add {
  position: absolute;
  bottom: 30px;
  right: 10px;
}

.add:hover {
  cursor: pointer;
  color: red;
  text-decoration: linen;
}

.left_side {
  width: 100px;
  height: 200px;
  position: fixed;
  top: 200px;
  left: 50px;
  display: flex;
  justify-content: right;
  flex-direction: column;
  text-align: center;
  letter-spacing: 3px;
}
</style>